<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tsinglog - 首页</title>
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/fonts/iconfont.css">
  <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/zzsc.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/dcalendar.picker.css">
  <link rel="stylesheet" href="/static/css/common/base.css">
  <link rel="stylesheet" href="/static/css/common/layout.css">
  <link rel="stylesheet" href="/static/css/content/notice.css">
  <link rel="stylesheet" href="/static/css/content/modal.css">
  <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>

<!--顶部-->
<div th:replace="layout/header :: header"></div>
<!--内容-->
<div class="content">
  <div class="content-in div-in">
    <div class="container">
      <div class="row">
        <!--内容左侧区域-->
        <div th:replace="layout/left :: left"></div>
        <!--内容中间区域-->
        <div class="col-md-7 col-md-offset-2 content-center">
          <!--公告-->
          <div th:replace="content/notice :: notice"></div>
          <!--轮播图-->
          <div id="tsing_carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators" th:if="${carouselImageList ne null}">
              <li data-target="#tsing_carousel"
                  th:each="image, status:${carouselImageList}"
                  th:data-slide-to="${status.index}"
                  th:class="${status.index == 0}? 'active': ''"></li>
            </ol>
            <ol class="carousel-indicators" th:if="${carouselImageList eq null}"></ol>

            <div class="carousel-inner" role="listbox">
              <a th:each="image, status:${carouselImageList}"
                 th:if="${carouselImageList ne null}"
                   th:class="${status.index == 0}? 'item active': 'item'"
                   th:style="'background: url(' + ${image.picUrl} +') no-repeat center center;background-size: cover;'"
                   th:href="@{${image.articleLink}}">
                <div class="inner-content" th:text="${image.articleTitle}"></div>
              </a>
              <a href="javascript:;" class="item no-pic" th:if="${carouselImageList eq null}">
                暂无轮播图片
              </a>
            </div>

            <!-- Controls -->
            <a th:if="${carouselImageList ne null}"
               class="left carousel-control"
               href="#tsing_carousel"
               role="button"
               data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            </a>
            <a th:if="${carouselImageList ne null}"
               class="right carousel-control"
               href="#tsing_carousel"
               role="button"
               data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </a>
          </div>
          <!--标签选项卡-->
          <div id="tsing_tab">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#latest_articles" aria-controls="home" role="tab" data-toggle="tab">最新文章
                  <span>/ New Article</span>
                </a>
              </li>
              <li role="presentation">
                <a href="#latest_replies" aria-controls="profile" role="tab" data-toggle="tab">最新回复
                  <span>/ New Reply</span>
                </a>
              </li>
            </ul>
            <div class="tab-content clearfix">
              <!-- 最新发表的文章 -->
              <div role="tabpanel" class="tab-pane fade in active" id="latest_articles">
                <!--媒体对象-->
                <div class="media" th:each="article:${latestReleaseArticlePage.items}"
                     th:onclick="'toArticle('+ ${article.id} + ')'">
                  <div class="media-left">
                    <img th:src="@{${article.coverImage}}"/>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading" th:text="${article.title}"></h4>
                    <p th:text="${article.summary}"></p>
                    <ul class="clearfix">
                      <li>
                        <i class="iconfont icon-shijian"></i>
                        <span th:text="${article.releaseTime}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-yanjing"></i>
                        <span th:text="${article.browseCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-pinglun"></i>
                        <span th:text="${article.commentCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-xihuan"></i>
                        <span th:text="${article.preferCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-fenlei"></i>
                        <span th:if="${article.type} == '1'">原创</span>
                        <span th:if="${article.type} == '2'">转载</span>
                      </li>
                    </ul>
                  </div>
                  <span class="article-flag" th:if="${article.upToTop == 1}">置 顶</span>
                </div>
              </div>
              <!-- 最新评论的文章 -->
              <div role="tabpanel" class="tab-pane fade" id="latest_replies">
                <!--媒体对象-->
                <div class="media"th:each="article:${latestReplyArticlePage.items}"
                     th:onclick="'toArticle('+ ${article.id} + ')'">
                  <div class="media-left">
                    <img th:src="@{${article.coverImage}}"/>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading" th:text="${article.title}"></h4>
                    <p th:text="${article.summary}"></p>
                    <ul class="clearfix">
                      <li>
                        <i class="iconfont icon-shijian"></i>
                        <span th:text="${article.releaseTime}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-yanjing"></i>
                        <span th:text="${article.browseCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-pinglun"></i>
                        <span th:text="${article.commentCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-xihuan"></i>
                        <span th:text="${article.preferCount}"></span>
                      </li>
                      <li>
                        <i class="iconfont icon-fenlei"></i>
                        <span th:if="${article.type} == '1'">原创</span>
                        <span th:if="${article.type} == '2'">转载</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <a href="/list" th:if="${#lists.size(latestReleaseArticlePage.items) != 0}"
                 class="show-more-article">点击查看更多文章 >>></a>
            </div>
          </div>
        </div>
        <!--内容右侧区域-->
        <div th:replace="layout/right :: right"></div>
      </div>
    </div>

  </div>
</div>
<!--底部-->
<div th:replace="layout/footer :: footer"></div>
<!--提示框-->
<div th:replace="content/modal :: modal"></div>

<script src="../static/lib/jquery/jquery.js"></script>
<script src="../static/lib/bootstrap/js/bootstrap.js"></script>
<script src="../static/lib/DCalendar/js/dcalendar.picker.js"></script>
<script src="../static/js/notice.js"></script>
<script src="../static/js/layout.js"></script>
<script src="../static/js/modal.js"></script>

<script th:inline="javascript">

  let interval = [[${carouselInterval}]];
  // 初始化轮播图显示的间隔时间
  $(".carousel").carousel({
    interval: interval
  });

</script>

</body>
</html>